<template>
  <div
    class="choose">
    <div
      class="header">
      {{
        info.type
      }}
    </div>
    <div
      class="lis">
      <ul>
        <li
          v-for="(item,index) in info.children"
          :key="index"
          @click="chooseNum=index"
          :class="chooseNum===index?'chooseli':''"
        >
          {{
            item
          }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "choose",
  props: ["info"],
  data() {
    return {
      chooseNum: 0
    }
  },
}
</script>

<style
  scoped
  lang="less">
.choose {
  width: 100%;
  height: 55px;
  padding-left: 15px;
  margin-top: 25px;

  .header {
    font-size: 14px;
    color: #d2d0d3;
  }

  .lis {
    overflow: auto;

    ul {
      margin-top: 10px;
      white-space: nowrap;
      display: inline-flex;

      li {
        float: left;
        height: 24px;
        padding: 0 8px;
        border-radius: 10px;
        background-color: #55525d;
        margin-left: 8px;
        line-height: 20px;
        border: 2px solid transparent;

        &:nth-child(1) {
          margin-left: 0;
        }
      }

      .chooseli {
        border: 2px solid #a8871d;
        color: #a8871d;
      }
    }
  }
  div::-webkit-scrollbar {
    width: 0;
  }
}
</style>
